<template>
  <div>
    <div class="login-head">
      <span style="color: #fff" @click="jumpFn()"> <van-icon name="arrow-left" /></span>
      <span class="login-title">我的</span>
      <span></span>
    </div>
    <div class="self-Massage" @click="jumpInfo()">
      <img
        :src=url1
        alt=""
      />
      <div class="self-Massage-information">
        <div>
          <p>{{ idVal }}</p>
          <p>暂无绑定手机号</p>
        </div>
        <div>
          <span> <van-icon name="arrow" /></span>
        </div>
      </div>
    </div>
    <div class="self-middle">
      <div class="balanceV" @click="jumpBalance()">
        <p><span v-text="money">321321</span>元</p>
        <p>我的余额</p>
      </div>
      <div @click="jumpDjj">
        <p><span style="color: #ff5f3e">3</span>个</p>
        <p>优惠券</p>
      </div>
      <div @click="jumpIntegral()">
        <p><span style="color: #6ac20b">0</span>分</p>
        <p>我的积分</p>
      </div>
    </div>
    <div class="self-list">
      <p @click="jumpOrderVal()">
        <span style="margin-right: 3px"><van-icon name="notes-o" /></span
        >我的订单 <span class="jtlogo"><van-icon name="arrow" /></span>
      </p>
      <p>
        <span style="color: #ff5f3e; margin-right: 3px"
          ><van-icon name="shop"
        /></span>
        积分商城<span class="jtlogo"><van-icon name="arrow" /></span>
      </p>
      <p @click="jumpVipCenter()">
        <span style="color: gold; margin-right: 3px"
          ><van-icon name="diamond" /></span
        >饿了么会员卡<span class="jtlogo"><van-icon name="arrow" /></span>
      </p>
    </div>
    <div class="self-list2 self-list">
      <p @click="jumpServerCenter()">
        <span style="color: #ff5f3e; margin-right: 3px"
          ><van-icon name="good-job-o"
        /></span>
        服务中心<span class="jtlogo"><van-icon name="arrow" /></span>
      </p>
      <p>
        <span style="color: gold; margin-right: 3px"
          ><van-icon name="down" /></span
        >下载饿了么App<span class="jtlogo"><van-icon name="arrow" /></span>
      </p>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "myVal",

  data() {
    return {
      username: "",
      url1:JSON.parse(localStorage.getItem('ursl'))
    };
  },
  mounted() {},
  methods: {
    jumpOrderVal(){
      this.$router.push({
        name:"orderVal"
      })
    },
    jumpVipCenter(){
      this.$router.push({
        name:"vipCenter"
      })
    },
    jumpFn(){
      this.$store.commit("detailTz");
      this.$router.push({
        name:"allCity"
      })
    },
    jumpIntegral(){
      this.$router.push({
        name:"integral"
      })
    },
    jumpDjj(){
      this.$router.push({
        name:"daijinjuan"
      })
    },
    jumpBalance() {
      this.$store.commit("balanceObj");
      this.$router.push({
        name: "balance",
      });
    },
  jumpInfo(){
    this.$store.commit("detailTz");
      this.$router.push({
        name: "info",
      });
  },
  jumpServerCenter(){
    this.$router.push({
      name:"serverCenter"
    })
  }
  },
  computed: {
    ...mapState(["idVal","money","arror"]),
  },

};
</script>

<style scoped>
.login-head {
  width: 100%;
  height: 1.2576rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0092e8;
}
.login-title {
  color: white;
  position: relative;
  left: -0.5405rem;
  font-size: 0.5405rem;
}
.self-Massage {
  width: 100%;
  height: 2.027rem;
  background-color: #0092e8;
  border-top: 0.0135rem solid #f5f5f5;
  display: flex;
  justify-content: space-between;
  font-size: 0.4865rem;
  color: #ffffff;
  align-items: center;
}
.self-Massage img {
  width: 1.5836rem;
  height: 1.5836rem;
  border-radius: 50%;
  margin-left: 0.5405rem;
}
.self-Massage-information {
  width: 7.5676rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.self-middle {
  background-color: #fff;
  display: flex;
  width: 100%;
  height: 2.0541rem;
  box-sizing: border-box;

  align-items: center;
  justify-content: space-between;
}
.self-middle > div {
  width: 3.3509rem;
  height: 2.0541rem;
  text-align: center;
  border-right: 0.027rem solid #e6e6e6;
  font-size: 0.6216rem;
  color: black;
}
.self-middle > div > p:nth-child(2) {
  font-size: 0.3784rem;
  color: #333;
}
.self-middle > div > p > span:nth-child(1) {
  display: inline-block;
  font-size: 0.6216rem;
  color: #f90;
  font-weight: 700;
  font-family: Helvetica Neue, Tahoma;
}
.self-middle > div > p:nth-child(1) {
  margin-top: 0.3514rem;
  margin-bottom: 0.1892rem;
}
.self-list > p {
  width: 100%;
  line-height: 1.1351rem;
  font-size: 0.4459rem;
  color: #666;
  box-sizing: border-box;
  padding-left: 0.5135rem;
  border-bottom: 0.027rem solid #e6e6e6;
}
.self-list {
  margin: 0.2703rem 0;
  background-color: #fff;
}
.jtlogo {
  float: right;
}
.self-Massage-information > div > p:nth-child(2) {
  font-size: 0.3784rem;
}

</style>